<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div>
          <el-button type="info" icon="el-icon-arrow-left" size="mini" @click="$router.go(-1)">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 添加菜单表单 -->
    <el-row>
      <el-col :span="24">
        <el-form :rules="rules" ref="TypeForm" :model="TypeForm" label-width="100px" label-position="top" :inline="true"
          size="medium">
          <input type="hidden" v-model="TypeForm.pk_TypeID" />
          <el-form-item label="名称" prop="TypeName_CHS">
            <el-input placeholder="类型名称" v-model="TypeForm.TypeName_CHS"></el-input>
          </el-form-item>
          <el-form-item label="类型值" prop="ID">
            <el-input placeholder="类型值" v-model.number="TypeForm.ID"></el-input>
          </el-form-item>
          <el-form-item label="表名" prop="TableName">
            <el-input placeholder="表名称" v-model="TypeForm.TableName"></el-input>
          </el-form-item>
          <el-form-item label="显示">
            <el-input placeholder="显示颜色" v-model="TypeForm.Visual" ref="VisualInput"
              @input="VisualColor(TypeForm.Visual)">
              <template slot="suffix">
                <el-color-picker v-model="TypeForm.Visual" @change="VisualColor(TypeForm.Visual)" size="small"
                  style="margin-top:2px;">
                </el-color-picker>
              </template>
            </el-input>

          </el-form-item>

          <el-form-item label="描述" prop="SortID">
            <el-input v-model="TypeForm.Description_CHS" type="textarea" rows="5" placeholder="描述..">
            </el-input>
          </el-form-item>
          <el-form-item label="审核人">
            <el-input :disabled="true" ref="SelFullName" placeholder="指定审核人">
              <template slot="suffix">
                <el-button size="mini" type="primary" @click="dialogDesc=true">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('TypeForm')" icon="el-icon-success">提交</el-button>
            <el-button type="normal" @click="$router.go(-1)" icon="el-icon-error">取消</el-button>
          </el-form-item>
        </el-form>
        <!-- 新增审核人、弹出层 -->
        <el-dialog :lock-scroll="false" @open="DialogOpen" :visible.sync="dialogDesc">
          <div class="dialogTop">
            <div class="title_div">
              <div style="float:left;padding-left:10px;line-height:30px;">
                <!-- <el-button size="small" icon="el-icon-circle-plus" type="primary">新增接收人</el-button> -->
                <h4>指定审核人</h4>
              </div>
              <div style="float:right">
                <el-input size="mini" style="width:170px" v-model="SelAudit" placeholder="查找姓名...">
                  <el-button slot="append" @click="DialogGetDt ()" icon="el-icon-search" style="width:50px;">
                  </el-button>
                </el-input>
              </div>
            </div>
            <el-table ref="AuditTable" @select="AuditSelectCk" @selection-change="AuditSelectChange"
              :data="AuditInfo.AuditList">
              <el-table-column label="选择" type="selection"></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-avatar :size="50" :src="'data:image/jpeg;base64,'+scope.row.ImagePath1"></el-avatar>
                </template>
              </el-table-column>
              <el-table-column label="部门" prop="DepartmentName">
              </el-table-column>
              <el-table-column label="真实姓名" prop="FullName"></el-table-column>
              <el-table-column label="用户名" prop="UserName"></el-table-column>
              <el-table-column label="角色" prop="RoleName_CHS"></el-table-column>
              <el-table-column label="电话" prop="Phone1"></el-table-column>
            </el-table>
            <div class="foot_page">
              <el-pagination background layout="prev, pager, next" :total="AuditInfo.Count"
                :current-page.sync="AuditInfoPage" :page-size="4">
              </el-pagination>
            </div>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
}

.el-form-item {
  width: 49%;
}
.from_icon {
  margin-left: 3px;
  font-size: 15px;
  &:hover {
    color: #409eff;
    cursor: pointer;
  }
}
//弹出层样式
.dialogTop {
  border: 1px solid #f4f4f4;
  border-top: 3px solid #d2d6de;
  border-bottom-color: white;
  //头部按钮
  .title_div {
    padding: 5px;
    height: 32px;
    border-bottom: 1px solid #f4f4f4;
  }
  //底部分页
  .foot_page {
    padding: 5px;
    text-align: center;
  }
}
</style>
<script>
export default {
  data () {
    return {
      TypeForm: {
        ParentID: 0,
        Description_CHT: null
      },
      TypeList: [],
      SelType: '',//模糊查询input值
      dialogDesc: false,//弹出层
      Type: 'Add',
      AuditInfo: [],//审核人初始化信息
      AuditInfoPage: 1,//审核人表格分页页数
      AuditSelectList: [],//审核人已选择列表集合
      SelAudit: '',//审核人表格模糊查询
      rules: {
        TypeName_CHS: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        ID: [
          { required: true, message: '类型值不能为空', trigger: 'blur' },
          { type: 'integer', message: '只能输入整数', trigger: 'blur' }
        ],
        TableName: [
          { required: true, message: '需指定表名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /*  表单提交事件，执行表单验证
     并提交数据到后台 */
    submit (TypeForm) {
      //表单验证
      this.$refs[TypeForm].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.TypeForm.Description_CHT = this.AuditSelectList.map(n => n.pk_User).join('|')
        //执行请求
        this.$axios({
          url: '/HrApi/TypeMange/UpdateType',
          method: "POST",
          data: this.$Qs.stringify({
            TypeInfo: JSON.stringify(this.TypeForm),
            Type: this.Type,
            pk_User: this.$store.state.UserInfo.pk_User
          })
        }).then(res => {
          if (!res.data.code) {
            if (this.Type === "Add") {
              //添加成功，重置表单
              this.$refs[TypeForm].resetFields();
            }
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    GetDt () {
      this.$axios({
        url: '/HrApi/TypeMange/GetTypeInfo',
        method: 'GET',
        params: {
          pk_TypeID: this.$route.query["pk_TypeID"]
        }
      }).then(res => {
        if (!res.data.code) {
          this.TypeForm = res.data.data
          this.AuditSelectList = res.data.UserList
          if (res.data.data.Description_CHT.length) {
            this.$refs.SelFullName.$el.childNodes[1].value = res.data.data.Description_CHT
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //动态更新显示样式input颜色
    VisualColor (c) {
      if (c === "white" | c === "#FFFFFF") {
        this.$message.info('白色可能会无效果!')
        this.$refs.VisualInput.$el.childNodes[1].style = "color:black"
        return
      }
      this.$refs.VisualInput.$el.childNodes[1].style = "color:" + c;
    },
    //弹窗审核人信息获取
    DialogGetDt () {
      this.$axios({
        url: '/HrApi/TypeMange/GetAuditList',
        method: 'GET',
        params: {
          page: this.AuditInfoPage,
          limit: 4,
          Term: this.SelAudit
        }
      }).then(res => {
        if (!res.data.code) {
          this.AuditInfo = res.data.data
          if (this.AuditSelectList.length) {
            //已选中集合不为空则绑定在表格上面
            let SelFullName = this.AuditSelectList.map(n => n.pk_User).toString()
            this.$nextTick(() => {
              this.AuditInfo.AuditList.forEach(item => {
                if (SelFullName.indexOf(item.pk_User) != -1) {
                  //如果存在，则勾选行
                  this.$refs.AuditTable.toggleRowSelection(item);
                }
              })
            })

          }
        }
      })
    },
    //添加审核人弹窗显示事件
    DialogOpen () {
      /*  每单弹出层开启的时候
       触发事件，并向后台获取审核人信息 */
      this.DialogGetDt();
    },
    //审核人表格多选事件
    AuditSelectChange (s) {
      this.AuditSelectList = s;//赋值
      this.$refs.SelFullName.$el.childNodes[1].value = s.map(n => n.FullName)
    },
    //审核人表格多选框用户手动选择除法
    AuditSelectCk (s) {
      if (s.length < this.AuditSelectList.length) {
        this.$message.info("取消")
      }
    }
  },
  mounted () {
    //拉取数据
    if (Object.keys(this.$route.query).length) {
      this.Type = "Edit";
      this.GetDt();
    }
  },
  watch: {
    AuditInfoPage () {
      this.DialogGetDt();
    },
    SelAudit () {
      if (this.SelAudit === "") {
        this.DialogGetDt();
      }
    }
  }
}
</script>